<template>
	<!-- 合同模板管理 -->
	<div class="templateMngPage">
		<div class="content">
			<div class="header">
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="搜索合同">
						<el-input
							v-model="formInline.version"
							style="width: 284px"
							placeholder="根据合同版本号搜索"
						/>
					</el-form-item>
					<el-form-item label="物业类型筛选">
						<el-select
							v-model="formInline.propertyType"
							class="w-181"
							placeholder="全部"
						>
							<el-option
								v-for="item in propertyTypeOptionsArr"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="业务场景筛选">
						<el-select
							class="w-181"
							v-model="formInline.contractType"
							placeholder="全部"
						>
							<el-option
								v-for="item in BusinessSceneOptionsArr"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</el-form-item>
					<el-button
						color="#FF7B50"
						style="color: #fff"
						type="primary"
						@click="doSearch"
						>查看</el-button
					>
					<el-button color="#F0F0F0" @click="doReset">重置</el-button>
				</el-form>
			</div>
			<el-table
				ref="multipleTable"
				:data="state.tableData"
				tooltip-effect="dark"
				style="width: 100%; margin-bottom: 23px"
			>
				<el-table-column prop="index" label="序号" width="55" align="center">
				</el-table-column>
				<el-table-column
					prop="templateName"
					label="租赁合同模板名称"
					align="center"
				></el-table-column>
				<el-table-column
					prop="protocolType"
					label="协议类型"
					width="200"
					align="center"
				>
					<template #default="scope">
						{{ scope.row.protocolType == 1 ? "资产租赁" : "-" }}
					</template>
				</el-table-column>
				<el-table-column prop="propertyType" label="物业类型" align="center">
					<template #default="scope">
						{{
							scope.row.propertyType == 1
								? "综合体"
								: scope.row.propertyType == 2
								? "农贸市场"
								: "商铺"
						}}
					</template>
				</el-table-column>
				<el-table-column prop="contractType" label="业务场景" align="center">
					<template #default="scope">
						{{
							scope.row.contractType == 1
								? "新签"
								: scope.row.propertyType == 2
								? "续签"
								: "退租"
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="version"
					label="模板版本号"
					align="center"
				></el-table-column>
				<el-table-column
					prop="createTime"
					label="模板创建时间"
					align="center"
				></el-table-column>

				<el-table-column label="操作" width="200" align="center" fixed="right">
					<template #default="scope">
						<el-button
							color="#FF7B50"
							style="color: #fff; width: 68px; height: 31px"
							type="primary"
							@click="goDetail(scope.row, 1)"
							>预览</el-button
						>
						<el-button
							plain
							color="#FF7B50"
							style="width: 68px; height: 31px"
							@click="goDetail(scope.row, 2)"
							>编辑</el-button
						>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import {
	ElForm,
	ElFormItem,
	ElTable,
	ElTableColumn,
	ElSelect,
	ElOption,
} from "element-plus";
import { useRouter } from "vue-router";
import {
	propertyTypeOptionsArr,
	BusinessSceneOptionsArr,
} from "@/common/dict/dictCollect";
import { contractApi } from "@/api/assets";

const router = useRouter();

const formInline = reactive({
	version: "",
	propertyType: "",
	contractType: "",
});

const state = reactive({
	tableData: [],
});

const initTableData = () => {
	contractApi.getContractTemplates(formInline).then((res) => {
		const { code, data, msg } = res;
		if (code == 200) {
			state.tableData = data.map((n, i) => {
				n.index = i + 1;
				return n;
			});
		}
	});
};

const doSearch = () => {
	initTableData();
};

const doReset = () => {
	initTableData();
};

const goDetail = (row, type) => {
	let pageType = type == 1 ? "preview" : "edit";
	let jumpPath =
		type == 1
			? "/asset/collaborativeApproval/contract/templatePreview/"
			: "/asset/collaborativeApproval/contract/templateEdit/";
	router.push({
		path:
			jumpPath +
			`${row.templateName}/${row.templateUrlKey}/${row.propertyType}/${row.protocolType}/${row.contractType}/${row.version}/` +
			pageType,
	});
};

onMounted(() => {
	initTableData();
});
</script>

<style lang="scss" scoped>
.templateMngPage {
	.content {
		.w-181 {
			width: 181px;
		}
		.header {
			margin-bottom: 38px;
			.el-form {
				.el-form-item {
					margin-bottom: 0;
				}
			}
		}
	}
}
</style>
